# Variable Basics

## Business Context

In workflow orchestration, information needs to be passed between nodes. To achieve this, we use **variables** to store and manage this information.

:::warning A variable consists of three main components:

1. **Unique Identifier**: The name of the variable, used to distinguish between different variables so they can be accurately referenced and used in the program. Examples: `userName` or `totalAmount`.
2. **Value**: The data stored in the variable. Values can be of various types, such as numbers (e.g., `42`), strings (e.g., `"Hello!"`), booleans (e.g., `true`), etc.
3. **Type**: The kind of data the variable can store. The type determines what values the variable can accept. For example, a variable can be an integer, float, string, boolean, etc.

:::

Here’s an example of workflow orchestration: The WebSearch node retrieves knowledge and passes it to the LLM node for analysis via `natural_language_desc`.

<div style={{display: 'flex', gap: '20px'}}>
  <img style={{width: "50%"}} loading="lazy" src="/variable/variable-biz-context-websearch-llm.png" />
  <div>
    In this example:
    <p style={{marginTop: 10}}>1. The WebSearch node stores the information (value) in a variable with the unique identifier `natural_language_desc`.</p>
    <p style={{marginTop: 5}}>2. The LLM node retrieves the knowledge base information (value) via the `natural_language_desc` identifier and passes it to the LLM node for analysis.</p>
    <p style={{marginTop: 5}}>3. The `natural_language_desc` variable is of type string, representing the content retrieved from the web, such as "DeepSeek released a new model today."</p>
  </div>
</div>

## What is the Variable Engine?

The variable engine is an optional built-in feature provided by Flowgram to help streamline **variable information orchestration** in workflow design more efficiently. It enables the following functionalities:

<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "25px" }}>
  <div style={{ gridColumn: "span 2" }}>
    <b>Scope Constraint Control</b>
    <p className="rs-tip">With the variable engine, you can control the scope of variables, ensuring they are available within the appropriate range and avoiding unnecessary conflicts.</p>
    <div style={{display: "flex", gap: "25px"}}>
      <div>
        <img loading="lazy" src="/variable/variable-scope-feature-1.png" />
        <p style={{marginTop: '10px'}}>In the diagram, the `query` variable from the Start node can be accessed by subsequent LLM and End nodes.</p>
      </div>
      <div>
        <img loading="lazy" src="/variable/variable-scope-feature-2.png" />
        <p style={{marginTop: '10px'}}>In the diagram, the LLM node is inside a Condition branch, while the End node is outside. Thus, the End node's variable selector cannot access the `result` variable from the LLM node.</p>
      </div>
    </div>
  </div>
  <div>
    <b>Variable Information Tree Maintenance</b>
    <p className="rs-tip">The variable engine helps you build a clear variable information tree, making it easier to view and manage the state and relationships of all variables.</p>
    <img loading="lazy" src="/variable/variable-tree-management.gif" />
    <p style={{marginTop: '10px'}}>The diagram shows output variables from multiple nodes and global configurations, with some variables containing multiple sub-variables forming a tree structure.</p>
  </div>
  <div>
    <b>Automatic Type Inference</b>
    <p className="rs-tip">The variable engine can automatically infer variable types based on context, reducing the need for manual type specification and improving development efficiency.</p>
    <img loading="lazy" src="/variable/variable-batch-auto-infer.gif" />
    <p style={{marginTop: '10px'}}>In the diagram, the Batch node processes the `arr` variable from the Start node. When the type of the `arr` variable changes, the type of the `item` variable output by the Batch node also changes accordingly.</p>
  </div>
</div>

## Enabling the Variable Engine

[> API Detail](https://flowgram.ai/auto-docs/editor/interfaces/VariablePluginOptions.html)

```tsx pure title="use-editor-props.ts" {3}

// EditorProps
{
  variableEngine: {
    /**
     * The variable engine must be enabled to use this feature.
     */
    enable: true
  }
}
```